<!-- 首页 -->
<style scoped>
  .home{
    border: 1px solid #dcdee2;
  }
  .split-pane{
    padding: 5px;
  }
</style>

<template>
  <div class="home" :style="{height: mainHeight+'px'}">
    <Split v-model="split1" min="500">
      <div slot="left" class="split-pane">
        <Card style="width: 100%" :style="{height: mainHeight-10+'px'}">
          <div slot="title" style="height: 24px; line-height: 24px;">
            <Icon type="ios-film-outline"></Icon>
            每日任务
            <Input v-model="dailySearchValue" @on-click="getSearchList" style="width: 300px; float: right; margin-right: 100px;" size="small" search placeholder="请输入任务内容" />
          </div>
          <div slot="extra">
            <Button @click="publishTask" type="primary" shape="circle" icon="md-add" size="small">发布任务</Button>
          </div>
          <Table @on-row-dblclick="showTaskInfoDialog(row, index)" border size="small" :columns="dailyTaskColumns" :data="dailyTaskList"></Table>
        </Card>
      </div>
      <div slot="right">
        <Split v-model="split2" min="220"  mode="vertical" :style="{height: mainHeight+'px'}">
          <div slot="top" style="height: 100%; padding: 5px 5px 5px 10px;">
            <Card style="width: 100%; height: 100%;">
              <div slot="title">
                <Icon type="ios-film-outline"></Icon>
                我的任务
              </div>
              <Table border size="small" :columns="myTaskColumns" :data="myTaskList"></Table>
            </Card>
          </div>
          <div slot="bottom" style="height: 100%; padding: 10px 5px 5px 10px;">
            <Card style="width: 100%; height: 100%;">
              <div slot="title">
                <Icon type="ios-film-outline"></Icon>
                历史任务
              </div>
              <Table border size="small" :columns="historyTaskColumns" :data="historyTaskList"></Table>
            </Card>
          </div>
        </Split>
      </div>
    </Split>
    <!-- 发布任务 -->
    <publish-task-dialog></publish-task-dialog>
    <!-- 任务详情 -->
    <task-info-dialog></task-info-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import PublishTaskDialog from './dialog/PublishTaskDialog.vue'
import TaskInfoDialog from './dialog/TaskInfoDialog.vue'
import {
  getDailyList,
  getDailyListByContent
} from './api/home'
export default {
  components: {
    PublishTaskDialog,
    TaskInfoDialog
  },
  data () {
    return {
      split1: 0.7,
      split2: 0.6,
      mainHeight: '600',
      dailySearchValue: '',
      dailyTaskColumns: [
        {
          title: '任务内容',
          key: 'content'
        },
        {
          title: '任务等级',
          key: 'level',
          width: 180,
          render: (h, params) => {
            return h('Rate', {
              props: {
                disabled: true,
                value: params.row.level
              }
            })
          }
        },
        {
          title: '状态',
          key: 'status',
          width: 100,
          render: (h, params) => {
            return h('span', this.taskStatus(params.row.status))
          }
        }
      ],
      myTaskColumns: [],
      historyTaskColumns: [],
      dailyTaskList: [],
      myTaskList: [],
      historyTaskList: []
    }
  },
  computed: {
    ...mapState({
      newTask: state => state.home.newTask
    })
  },
  watch: {
    newTask (value) {
      this.dailyTaskList.unshift(value)
    }
  },
  mounted () {
    this.mainHeight = window.innerHeight - document.querySelector('.ivu-layout-header').offsetHeight - document.querySelector('.ivu-layout-footer').offsetHeight - 4
    this.getList()
  },
  methods: {
    async getSearchList () {
      const searchVal = this.dailySearchValue
      if (!searchVal && searchVal && !searchVal.trim()) {
        this.$Notice.error({
          title: '提示',
          desc: '请输入搜索任务内容'
        })
      }
      const res = await getDailyListByContent(searchVal)
      if (res.code === 200) {
        this.dailyTaskList = res.data
      } else {
        this.$Notice.error({
          title: '提示',
          desc: '搜索列表获取失败'
        })
      }
    },
    showTaskInfoDialog (row, index) {
      console.log(row)
      this.setTaskInfoDialog({
        visible: true,
        row: row
      })
    },
    taskStatus (status) {
      return status === 1 ? '等待中' : status === 2 ? '进行中' : status === 3 ? '已完成' : status
    },
    publishTask () {
      this.setPublishTaskDialog({
        visible: true
      })
    },
    async getList () {
      const res = await getDailyList()
      if (res.code === 200) {
        this.dailyTaskList = res.data
      } else {
        this.$Notice.error({
          title: '提示',
          desc: '列表获取失败'
        })
      }
    },
    ...mapMutations([
      'setPublishTaskDialog',
      'setTaskInfoDialog'
    ])
  }
}
</script>
